<template>
  <div class="query-container">
    <div class="shawBox">
      <el-form :inline="true" :model="queryForm" class="query-form">
        <el-form-item label="角色名称:">
          <el-input
            v-model="queryForm.routePointName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="权限字符">
          <el-input
            v-model="queryForm.routePointName"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色状态:">
          <el-select v-model="queryForm.moduleName" placeholder="请选择">
            <el-option label="模块A" value="moduleA"></el-option>
            <el-option label="模块B" value="moduleB"></el-option>
            <el-option label="模块C" value="moduleC"></el-option>
          </el-select>
        </el-form-item>

        <div style="float: right">
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
          <!-- <el-button @click="handleAddRole">新增</el-button> -->
        </div>
      </el-form>
      <!-- 表格 -->
      <el-table
        :data="displayTableData"
        class="custom-table"
        style="width: 100%"
        height="calc(100vh - 300px)"
      >
        <el-table-column label="角色序号" align="center">
          <template #default="scope">
            <!-- 计算公式：(当前页-1)*每页条数 + 索引 + 1 -->
            {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="index" label="角色名称"></el-table-column>
        <el-table-column
          prop="routePointSeq"
          label="权限字符"
        ></el-table-column>
        <el-table-column
          prop="routePointName"
          label="角色状态"
        ></el-table-column>
        <el-table-column
          prop="routePointName"
          label="创建时间"
        ></el-table-column>
        <!-- <el-table-column label="Operations">
          <template #default>
            <el-button link type="primary" size="small" @click="handleClick">
              修改
            </el-button>
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="150"
        style="margin-top: 30px; float: right; text-align: center"
      >
      </el-pagination>
    </div>
    <div
      class="shawBox"
      style="position: absolute; top: 0; left: 0; bottom: 0; right: 0"
      v-if="isAddRole"
    >
      <div style="float: right; height: 40px; overflow: hidden">
        <el-button type="primary" @click="submitAddRole">提交</el-button>
        <el-button @click="closeAddRole">返回</el-button>
      </div>
      <!-- <h3>新增角色</h3> -->
      <!-- 新增角色的表单 -->
      <el-form
        :model="addRoleForm"
        ref="addRoleFormRef"
        label-width="120px"
        style="margin: 20px; clear: both"
      >
        <el-form-item label="角色名称：" prop="roleName">
          <el-input
            style="width: 350px"
            v-model="addRoleForm.roleName"
            placeholder="请输入角色名称"
          />
        </el-form-item>
        <el-form-item label="权限字符：" prop="permissionChar">
          <el-input
            style="width: 350px"
            v-model="addRoleForm.permissionChar"
            placeholder="请输入权限字符"
          />
        </el-form-item>
        <el-form-item label="角色状态：">
          <el-select
            style="width: 350px"
            v-model="addRoleForm.roleStatus"
            placeholder="请选择角色状态"
          >
            <el-option label="启用" value="enabled"></el-option>
            <el-option label="禁用" value="disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单权限：">
          <!-- 递归组件：渲染树形权限列表 -->
          <tree-checkbox
            :tree-data="menuPermissions"
            v-model="addRoleForm.selectedPermissions"
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import TreeCheckbox from "./components/TreeCheckbox.vue";
// ---------- 新增角色弹窗相关 ----------
const isAddRole = ref(false); // 控制“新增角色”弹窗显示
const addRoleFormRef = ref(null); // 表单引用（用于验证）

// 菜单权限的树形结构（示例数据，实际需从后端获取）
const menuPermissions = ref([
  {
    label: "用户管理",
    value: "logQuery",
    children: [
      { label: "用户审批", value: "userLogQuery" },
      { label: "用户管理", value: "runLogQuery" },
      // { label: "角色管理", value: "sysLogQuery" },
    ],
  },
  {
    label: "系统公告",
    value: "sysNotice",
    children: [],
  },
  {
    label: "日志查询",
    value: "logQuery",
    children: [
      { label: "用户日志查询", value: "userLogQuery" },
      { label: "运行日志查询", value: "runLogQuery" },
      // { label: "系统日志查询", value: "sysLogQuery" },
    ],
  },
  {
    label: "基础数据",
    value: "basicData",
    children: [
      { label: "机场查询", value: "airportQuery" },
      { label: "区域查询", value: "areaQuery" },
      { label: "航路查询", value: "routeQuery" },
      { label: "历书查询", value: "ephemerisQuery" },
      { label: "不可用卫星查询", value: "unavailableSatQuery" },
    ],
  },
]);

// 新增角色的表单数据
const addRoleForm = reactive({
  roleName: "",
  permissionChar: "",
  roleStatus: "enabled", // 默认为“启用”
  selectedPermissions: [], // 存储选中的权限值
});

// 打开“新增角色”弹窗
// const handleAddRole = () => {
//   isAddRole.value = true;
//   // 重置表单（避免残留上次数据）
//   addRoleForm.roleName = "";
//   addRoleForm.permissionChar = "";
//   addRoleForm.roleStatus = "enabled";
//   addRoleForm.selectedPermissions = [];
// };

// 关闭“新增角色”弹窗
const closeAddRole = () => {
  isAddRole.value = false;
};

// 提交“新增角色”表单
const submitAddRole = async () => {
  try {
    // 手动触发表单验证
    await addRoleFormRef.value.validate();
    // 验证通过，执行新增逻辑（示例：打印数据，实际需调用接口）
    console.log("新增角色数据：", addRoleForm);
    // 模拟新增成功
    ElMessage.success("新增角色成功！");
    closeAddRole(); // 关闭弹窗
  } catch (error) {
    // 验证失败，提示错误
    console.log(error);
    // ElMessage.error("表单验证失败，请检查必填项！");
  }
};
// 查询表单数据
const queryForm = reactive({
  moduleName: "",
  status: "",
  startTime: "",
  endTime: "",
  routePointName: "",
});

// 表格原始数据（所有数据）
const tableData = ref([
  { index: "01", routePointSeq: "1", routePointName: "BUNTA" },
  { index: "02", routePointSeq: "2", routePointName: "P97" },
  { index: "03", routePointSeq: "3", routePointName: "LENKO" },
  { index: "04", routePointSeq: "4", routePointName: "IKELA" },
  { index: "05", routePointSeq: "5", routePointName: "SIKOU" },
  { index: "06", routePointSeq: "6", routePointName: "LENKO" },
  { index: "07", routePointSeq: "7", routePointName: "SIKOU" },
  { index: "08", routePointSeq: "8", routePointName: "P97" },
  { index: "09", routePointSeq: "11", routePointName: "BUNTA" },
  { index: "10", routePointSeq: "12", routePointName: "IKELA" },
  { index: "11", routePointSeq: "6", routePointName: "SIKOU" },
  { index: "12", routePointSeq: "1", routePointName: "BUNTA" },
  { index: "13", routePointSeq: "2", routePointName: "P97" },
  { index: "14", routePointSeq: "3", routePointName: "LENKO" },
  { index: "15", routePointSeq: "4", routePointName: "IKELA" },
  { index: "16", routePointSeq: "5", routePointName: "SIKOU" },
]);

// 【新增】当前页要显示的表格数据
const displayTableData = ref([]);

// 分页相关数据
const currentPage = ref(1);
const pageSize = ref(10);

// 计算“当前页要显示的10条数据”
const calculateDisplayData = () => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  displayTableData.value = tableData.value.slice(start, end);
};

// 初始化时调用，确保第一页显示前10条
calculateDisplayData();

// 处理查询
const handleQuery = () => {
  console.log("查询条件：", queryForm);
  // 若需要“查询后重置分页”，可加这行：currentPage.value = 1; calculateDisplayData();
};

// 处理重置
const handleReset = () => {
  queryForm.moduleName = "";
  queryForm.status = "";
  queryForm.startTime = "";
  queryForm.endTime = "";
  queryForm.routePointName = "";
};

// 处理每页条数改变
const handleSizeChange = (val) => {
  pageSize.value = val;
  calculateDisplayData(); // 重新计算当前页数据
};

// 处理当前页改变
const handleCurrentChange = (val) => {
  currentPage.value = val;
  calculateDisplayData(); // 重新计算当前页数据
};
</script>

<style scoped lang="scss">
.query-container {
  position: relative;
  text-align: left;
  font-size: 14px;
  color: #222;
  .shawBox {
    min-height: calc(100vh - 132px);
    overflow: hidden;
    fill: #fff;
    border-radius: 12px;
    background-color: #fff;
    filter: drop-shadow(0 0 15px rgba(14, 41, 73, 0.1));
    padding: 15px;
    box-sizing: border-box;
  }
}
:deep(.el-form-item__content) {
  width: 180px;
}
:deep(.el-form--inline .el-form-item) {
  margin-right: 22px;
}
:deep(.el-form-item__label) {
  color: #222;
}
.query-form {
  position: relative;
}
:deep(.el-pager li.is-active) {
  color: #fff;
  background: #286bf4;
  cursor: default;
  font-weight: bold;
}

/* 自定义表格样式 */
::v-deep .custom-table .el-table__header {
  height: 40px;
  line-height: 40px;
  background: #f6f9ff;
}
::v-deep .custom-table .el-table__header th {
  font-size: 12px;
  font-weight: 700;
  background: #f6f9ff;
  color: #222;
}
::v-deep .custom-table .el-table__row:nth-child(even) {
  background: #f9fbfd !important;
}
::v-deep .custom-table .el-table__row:nth-child(odd) {
  background-color: transparent;
}
::v-deep .custom-table .el-table__body td {
  color: #222;
}
:deep(.el-table .cell) {
  text-align: left;
}
</style>
